<style lang="scss">
	.container{
		padding: 24rpx;
	}
	.type-item {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin: 16rpx auto;
		padding: 8rpx;
		border: 1px solid $uni-border-color;
		border-radius: 6rpx;

		radio {
			width: 30px;
		}

		.type {
			display: flex;
			flex-wrap: wrap;
			font-size: 10px;

			.type-name {
				font-size: 14px;
			}

			.w-100 {
				width: 100%;
			}

			.w-50 {
				width: 50%;
			}
		}
	}

</style>

<template>
	<view class="container">
		<view class="type-item" @click="select(item)" v-for="item in buyTypes" :key="item.id">
			<radio :value="item.id" :checked="item.id == selected.id" />
			<view class="type">
				<view class="w-100 type-name">
					{{item.name}}
				</view>
				<view class="w-50">
					成团人数: {{item.needCount}} 人
				</view>
				<view class="w-50">
					开团奖励: {{item.chiefProfit}} 元
				</view>
				<!-- <view class="w-50">
					参团奖励: {{item.memberProfit}} 元
				</view> -->
				<view class="w-50">
					成团期限: 1 年
				</view>
			</view>
		</view>
		<view class="btn-box">
			<button class="btn btn-primary" type="default" @click="submit">确认选择</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buyTypes: [],
				selected: {}
			};
		},
		methods: {
			getBuyTypes() {
				this.$http.get('/api/services/app/GroupBuyType/GetAllList')
					.then(res => {
						this.buyTypes = res.data.result;
					})
			},
			select(item) {
				this.selected = item;
			},
			submit() {
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectOver', {
					data: this.selected
				});
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad() {
			this.getBuyTypes();
		}
	}
</script>
